<template>
  <ModernNav
    :brand-to="{ name: '主页' }"
    :menu-items="navigationItems"
    variant="default"
    :fixed="false"
    :blur="true"
  >
    <template #actions>
      <ThemeSwitcher />
      <ModernButton
        v-if="!user"
        variant="primary"
        size="sm"
        @click="$router.push({ name: '登录' })"
      >
        登录
      </ModernButton>
      <div v-else class="user-menu">
        <ModernButton
          variant="ghost"
          size="sm"
          @click="showUserMenu = !showUserMenu"
        >
          <UserIcon class="w-4 h-4" />
          {{ user.name || user.phonenum }}
          <ChevronDownIcon class="w-4 h-4 ml-1" />
        </ModernButton>

        <!-- 用户下拉菜单 -->
        <div v-if="showUserMenu" class="user-dropdown">
          <a href="#" class="user-dropdown-item" @click="editProfile">
            <UserIcon class="w-4 h-4" />
            个人信息
          </a>
          <a href="#" class="user-dropdown-item" @click="logout">
            <ArrowRightOnRectangleIcon class="w-4 h-4" />
            退出登录
          </a>
        </div>
      </div>
    </template>
  </ModernNav>
</template>

<script setup lang="ts">
import { computed, ref, onMounted, onUnmounted } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import {
  UserIcon,
  ChevronDownIcon,
  ArrowRightOnRectangleIcon,
  FlagIcon,
} from "@heroicons/vue/24/outline";
import { Storekey } from "../interface";
import Studycodemodel from "../mysql_interface/studycodemodel";
import * as routers from "../ojSass/data/router";

// 导入现代化组件
import ModernNav from "@/components/ui/ModernNav.vue";
import ModernButton from "@/components/ui/ModernButton.vue";
import ThemeSwitcher from "@/components/ui/ThemeSwitcher.vue";

const props = defineProps<{
  icon: string;
  myteam: Studycodemodel.Iteam;
  update?: boolean;
  href?: string;
}>();

const store = useStore(Storekey);
const router = useRouter();
const showUserMenu = ref(false);

// 获取用户信息
const user = computed(() => store.state.user);

// 导航菜单项
const navigationItems = computed(() => [
  {
    key: "teamfile",
    label: "团队文件",
    to: routers.teamfile,
    icon: FlagIcon,
  },
]);

// 编辑个人信息
const editProfile = () => {
  showUserMenu.value = false;
  // 触发个人信息编辑
  // 这里可以调用父组件的方法或者路由跳转
};

// 退出登录
const logout = async () => {
  showUserMenu.value = false;
  try {
    // 执行退出登录逻辑
    await store.dispatch("actionLogout");
    router.push({ name: "登录" });
  } catch (error) {
    console.error("退出登录失败:", error);
  }
};

// 点击外部关闭用户菜单
const handleClickOutside = (event: Event) => {
  const target = event.target as Element;
  if (!target.closest(".user-menu")) {
    showUserMenu.value = false;
  }
};

onMounted(() => {
  document.addEventListener("click", handleClickOutside);
});

onUnmounted(() => {
  document.removeEventListener("click", handleClickOutside);
});
</script>

<style scoped>
.user-menu {
  @apply relative;
}

.user-dropdown {
  @apply absolute top-full right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 py-2 z-50;
}

.user-dropdown-item {
  @apply flex items-center space-x-2 px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-primary-500 dark:hover:text-primary-400 transition-colors duration-200;
}
</style>
